<!-- BEGIN: VIEW -->
<script type="text/javascript" src="{baseUrl}/js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript" src="{baseUrl}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="{baseUrl}/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="{baseUrl}/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
	$(document).ready(function(){
		$('#slider1').tinycarousel({
			axis:'y',
		});	
		$("#fullimage").click(function() {
			$.fancybox({
				//'orig'			: $(this),
				'padding'		: 0,
				'href'			: '{baseUrl}{product.orgin}',
				'title'   		: '{product.product_name}',
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});
		});
		$(".p_more .viewport img").click(function() {
			$(".main_pic img").attr("src", $(this).attr("src"));
			$("#zoom-image").attr("href", $(this).attr("src"));
			
		});
	});
</script>

<div class="product-view">
	<div class="product-essential">
		<form id="product_addtocart_form" method="post">
			<div class="product-img-box">
				<div class="product-image main_pic">
					<a href='{baseUrl}{product.imgurl}' id="zoom-image" class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">
						<img width="314px" height="449px" title="{product.product_name}" alt="{product.product_name}" src="{baseUrl}{product.imgurl}" />
					</a>
				</div>
				<div class="more-views p_more" id="slider1">
					<a class="buttons prev" href="#">Previous</a>
					<div class="viewport">
						
						<ul class="overview">
							<li class="active"><img alt="" src="{baseUrl}{product.imgurl}" width="92px" height="107px"  /></li>
							<!-- BEGIN: MOREIMG -->
							<li><img alt="" src="{baseUrl}{MOREIMG.img_url}" width="92px" height="107px"  /></li>
							<!-- END: MOREIMG -->
							<!-- BEGIN: COLOR -->
							<li><img alt="" src="{baseUrl}{COLOR.img_url}" width="92px" height="107px"  /></li>
							<!-- END: COLOR -->
						</ul>
						
					</div>
					<a class="buttons next" href="#">Next</a>
				</div>
				<div class="clr"></div>
				
				<ul class="navtools">
					<li class="zoom">
						<a href="#" rel="lightbox" id="fullimage">ZOOM</a>
					</li>
					<li class="share">
						<script type="text/javascript">var addthis_pub="49eecb9c76fa2be1";</script>
							<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'>SHARE</a>
						<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
					</li>

				</ul>
				<div class="clr"></div>
				
			</div>
			<div class="product-shop">
				<div class="product-name">
					<h1>{product.product_name} 
						<span id="product-price-179" class="regular-price">
							<span class="price">{product.price}</span>
						</span>
					</h1>
				</div>
				<!-- BEGIN: PINFO -->
				<div class="p_info">
					<!-- BEGIN: PDESCRIPTION -->
					<div class="short-description">
						<h4>Mô tả</h4>
						<div class="std">{product.description}</div>
					</div>
					<!-- END: PDESCRIPTION -->
					<!-- BEGIN: PCOLOR -->
					<div class="color">
						<h4>Màu Sắc</h4>
						<div class="std"> 
							<ul>
								<!-- BEGIN: COLORLIST -->
								<li>
									<a href="?c=product&a=view&id={COLORLIST.product_id}&colorcode={COLORLIST.color_code}" style="background-color:#{COLORLIST.color_code}"></a>
								</li>
								<!-- END: COLORLIST -->
							</ul>
						</div>
					</div>
					<!-- END: PCOLOR -->
					<div class="clr"></div>
				</div>
				<!-- END: PINFO -->
				<!-- BEGIN: PSIZE -->
				<div class="p_info">
					<div class="short-description">
						<h4>Kích cỡ</h4>
						{product.size} 
					</div>
					<div class="clr"></div>
				</div>
				<!-- END: PSIZE -->
				<div id="needhelp">
					<h4>Bạn cần giúp đỡ?</h4>
					<!-- BEGIN: sky -->
					<a href="skype:{sky}?call"><img src="http://mystatus.skype.com/balloon/{sky}" style="border: none;" width="120" height="32" alt="My status" /></a>
					<!-- END: sky -->
					<!-- BEGIN: yahoo -->
					<a href="ymsgr:sendim?{yahoo}" title="Chat với tôi">
						<img src="http://opi.yahoo.com/online?u={yahoo}&m=g&t=9" alt="Chữ sẽ hiển thị khi không có hình" border="0" height="32" width="32" />
					</a>
					<!-- END: yahoo -->
					<br/>
					<br/>
					hoặc gọi tới
					<strong>0904048448</strong>
					| 9am- 9pm từ thứ 2 đến chủ nhật hàng ngày
					<br/>
					<br/>
					<div class="fb-like" data-href="http://topkids.com.vn" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>
				</div>
				<!-- BEGIN: PSIMILAR -->
				<div class="similar related scrollable-initiated">
					<h2>
						<span>Hàng Tương Tự</span>
					</h2>
					<div class="viewport">
						<div class="viewport_inner">
						<ul class="list">
							<!-- BEGIN: SIMILAR -->
							<li>
								<div>
									<a title="{SIMILAR.product_name}" href="?c=product&a=view&id={SIMILAR.product_id}">
											<img class="image" alt="{SIMILAR.product_name}" src="{baseUrl}{SIMILAR.imgurl}" width="84px" height="98px">
										<span class="details">
											{SIMILAR.product_name}
											<span class="price">
												<span>{SIMILAR.price}</span>
											</span>
										</span>
									</a>
									<ul class="colors ">
										<!-- BEGIN: COLOR -->
										<li class="fabric" style="background-color: #{COLOR.color_code}"></li>
										<!-- END: COLOR -->
									</ul>
								</div>
							</li>
							<!-- END: SIMILAR -->
						</ul>
						</div>
						<a class="prevPage disabled" href="#">Previous</a>
						<a class="nextPage" href="#">Next</a>
					</div>
				</div>
				<!-- END: PSIMILAR -->
			</div>
			<div class="clr"></div>
		</form>
	</div>
</div>
<!-- END: VIEW -->